<template>
	<div class="preview-box" v-if="isPreviewBox">
		<p class="preview-text">直播预告</p>
		<div class="example-3d" v-if="isLoopLivePreview">
			<swiper  ref="mySwiper" class="swiper" :options="swiperOption">
				<swiper-slide v-for="(v,index) in livePreviewList"    :key='index' >
					<img  class="img-cover"  :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_235,w_417'" />
					<template v-if="v.roomStatus=='0'">
						<div class="preview-time">
						  <p><span class="preview-yg">预告</span><span class="preview-time-num">{{v.beginTime | filterTime}}</span></p>						
					  </div>
					   <div  v-if="v.isZbRemind==0 && isZxyhApp"  :class="'sw'+v.roomId" :data-roomId = 'v.roomId'   :data-isZbRemind = "v.isZbRemind" class="start-remind"  >开播提醒</div>					    
					</template>
					<template v-else>
						<div class="live-time">
							<div class="gif-box">
								<img src="../../assets/images/zxyh/live-gif.gif"/>
							</div>
							<span class="live-text">直播中</span>
							<div class="person-icon"></div>
							<span class="person-num">{{v.roomMember | filterNum(1)}}</span>	
						</div>
					</template>
					<div class="cover-img" :data-roomId = "v.roomId" ></div>
				</swiper-slide>
			</swiper>
		</div>
		<div class="live-preview-one-list" v-if="oneArrayLength" v-for="(v,index) in livePreviewList" @click="goToLive(v.roomId)" :key='index'>
			<img class="img-imag-url" :src="v.imagUrl" />
			<template v-if="v.roomStatus=='0'">
				<div class="preview-time">
						<p><span class="preview-yg">预告</span><span class="preview-time-num">{{v.beginTime | filterTime}}</span></p>						
					</div>
			</template>
			<template v-if="v.roomStatus=='1'">
				<div class="live-time">
					<div class="gif-box">
						<img src="../../assets/images/zxyh/live-gif.gif"/>
					</div>
					<span class="live-text">直播中</span>
					<div class="person-icon"></div>
					<span class="person-num">{{v.roomMember | filterNum(1)}}</span>	
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	let vm = this;
	export default {
		props: {
//			livePreviewList: {
//				type: Object,
//				default: []
//			}
		},
		components: {

		},
		filters:{
			filterNum:function(type,fixed){
             if(typeof type == "undefined"){
             	return 0
             }else if(type < 10000) {
					return type
				} else {
					return(type / 10000).toFixed(fixed) + "w";
				}
			},
			filterTime:function(type){
				if(type){
					return `${type.slice(5,7)}月${type.slice(8,10)}日  ${type.slice(11,13)}:${type.slice(14,16)}`
				}
				
			}
		},
		data() {
			return {
				isZxyhApp:false,
				isPreviewBox:false,
				livePreviewList:[],
				isLoopLivePreview: false,
				oneArrayLength:false,
				bannerArray: [],
				swiperOption: {
					effect: 'coverflow',
					slidesPerView: 'auto',
					loopedSlides: 12,
					centeredSlides: true,
//					centeredSlidesBounds: true,
//					centerInsufficientSlides: true,
                    observer:true, 
                    observeParents:true,
                    observeSlideChildren:true,
					loop: true,
//					autoplay: {
//						delay: 5000,
//						stopOnLastSlide: false,
//						disableOnInteraction: false,
//					},
					initialSlide: 0,//默认初始化时显示第一个slide
					spaceBetween: 40,
					coverflowEffect: {
						rotate: 0,
//						stretch: 0.1,
//						depth: 130,
//						modifier: 1,
					},
					cubeEffect: {
//					    slideShadows: true,
//					    shadow: true,
//					    shadowOffset: 100,
//					    shadowScale: 0.2
					  },
					pagination: {
						el: ''//.swiper-pagination
					},
					on:{
					    click: (event)=>{					    	
					    	// let _this = this;
					         //let swiper = _this.$refs.mySwiper.swiper;					         
					    	if(event.target.className.includes('start-remind')){
					    		let roomId = event.target.getAttribute('data-roomId')
					    		this.liveStartTip(roomId)
					    		return
					    	}
					    	let roomId = event.target.getAttribute('data-roomId')
					    	vm.goToLive(roomId)
					    },
					  },
				}

			}
		},
		watch: {
		},
		created() {
			vm = this;
			//this.getRoomList()
		},
		activated: function() {
            this.getRoomList()
		},
		mounted() {
			this.isZxyhApp = window.terminal.isZxyhApp

		},
		methods: {
			//获取直播间列表
			getRoomList() {
				this.$http.get(`/h5live/getRoomList?plat=${fun.getPlatform()}`).then(res => {
						if(res.data.code == "000000") {
							this.livePreviewList = [...res.data.data.startRoomList,...res.data.data.forecastRoomList];
							if(this.livePreviewList.length){
								this.isPreviewBox = true;
								if(this.livePreviewList.length==1){
									this.isLoopLivePreview= false;
									this.oneArrayLength = true;									
								}else{
									this.oneArrayLength = false;
									this.isLoopLivePreview= true;
								}
							}else{
								this.isPreviewBox = false;
							}
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			liveStartTip(roomId){				
				if(this.$store.state.isYk){//游客
					fun.ykDisposeFun();
				}else{
					this.postRemindData(roomId)
				}
			},
           goToLive(roomId) {
				this.$router.push(`/${this.$channel}/liveRoom/${roomId}?dzhPage=true`);
		   },
		   //  开播提醒
		   postRemindData(roomId){
		   	  	let params = {
					'roomId':roomId,
					'isRemind': '1'
				}
		   	  	this.$http.post("/h5live/setZbRemind", this.$qs.stringify(params)).then(
					res => {
						let {code} = res.data
						if(code == "000000") {
							fun.toastMessage("预约成功", 3000)
                            let swDom = document.getElementsByClassName('sw'+roomId)
						   	 for(let i=0;i<swDom.length;i++){
						        swDom[i].style.display = 'none'
						     }
						} else {
							console.log('未知错误')
						}
					},
					err => {
						console.log(err);
					}
				);
		   	  
		   	 //console.log(event.target.getAttribute('data-isZbRemind'))
		   	 //event.target.setAttribute('data-isZbRemind',1)
		   	  //console.log(index);
		   	  //this.livePreviewList[index].isZbRemind = '1'
		   },
		}
	}
</script>

<style scoped="scoped">
	.preview-box>>>.swiper-slide-shadow-left{
		background-image:none;
	}
	.preview-box>>> .swiper-slide-shadow-right{
		background-image:none;
	}
	.preview-box>>>.swiper-slide-prev{
		opacity: 0.6;
		/*filter: blur(1px);*/
	}
	.preview-box>>>.swiper-slide-next{
		opacity: 0.6;
		/*filter: blur(1px);*/
	}
	.person-num{
		font-size: 19px;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 36px;
		display: inline-block;
	}
	.person-icon{
		width: 13px;
		height: 15px;
		background: url(../../assets/images/zxyh/small-person-icon.png) no-repeat;
		background-size: 13px 15px;
		margin: 0 10px  0 10px;
	}
	.live-text{
		font-size: 19px;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 5px;
		line-height: 36px;
		display: inline-block;
	}
	.gif-box{
		width: 47px;
		height: 36px;
		background: linear-gradient(0deg, #EC2639 0%, #FF6845 100%);
		border-radius: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.gif-box img{
		width: 21px;
		height: 19px;
	}
	.live-time{
		/*width: 188px;*/
		height: 36px;
		background: rgba(0,0,0,0.6);
	  position: absolute;
	  top: 18px;
	  left: 19px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding-right: 13px;
	  border-radius: 18px;
	}
	.live-preview-one-list{
		width: 647px;
		height: 345px;
		margin-left: 50px;
		position: relative;
	}
	.live-preview-one-list .img-imag-url{
		width: 647px;
		height: 345px;		
		border-radius: 12px;
	}
	.cover-img{
		width: 100% ;
		height: 100%;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.17) 17%, rgba(255, 255, 255, 0) 100%);
		/*background: saddlebrown;*/
        border-radius: 5px 5px 5px 5px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.preview-box,.example-3d{
		width: 750px;
	}
	.swiper-container{
		width: 750px;
		height: 256px;
	}
	.example-3d>>>.swiper-wrapper{
		width: 417px !important;
		height: 235px;
	}
	.example-3d>>>.swiper-slide{
		width: 417px !important;
		height: 235px;
		position: relative;
	}
	.example-3d>>> .img-cover{
		width: 417px !important;
		height: 235px;
		border-radius: 5px;
	}
	.preview-text{
		height: 36px;
		font-size: 35px;
		line-height: 36px;
		font-weight: 800;
		color: #34323F;
		margin: 24px 0 24px  30px;
	}
	.live-preview-one-list .preview-time{
		min-width: 290px;
		height: 50px;
		background: url(../../assets/images/zxyh/preview-lefticon.png) no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		background-size: 100% 100%;
		z-index: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.live-preview-one-list .preview-time p{ 
		width: 100%;
		color: white;
		line-height: 50px;
	}
	.live-preview-one-list .preview-yg{
		/*margin: 0  22px 0 15px;*/
		font-size: 30px;
		display: inline-block;
		transform: scale(0.8,0.8);
		margin: 0 10px 0 10px;
	}
	.live-preview-one-list .preview-time-num{
		font-size: 28px;
		display: inline-block;
		transform: scale(0.8,0.8);
	}
	.preview-time{
		width: 238px;
		height: 36px;
		background: url(../../assets/images/zxyh/preview-lefticon.png) no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		background-size: 238px 36px;
		z-index: 10;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.preview-time p{
		color: white;
		line-height: 36px;
		/*font-size: 17px;*/
	}
	.preview-yg{
		/*margin: 0  22px 0 15px;*/
		font-size: 24px;
		display: inline-block;
		transform: scale(0.8,0.8);
		margin: 0 10px 0 10px;
	}
	.preview-time-num{
		font-size: 22px;
		display: inline-block;
		transform: scale(0.8,0.8);
	}
	.start-remind{
		width: 159px;
		height: 44px;
		border: 1.5px solid #ffffff;
		position: absolute;
		bottom: 22px;
		right: 29px;
		z-index: 10;
		border-radius: 22px;
		line-height: 44px;
		text-align: center;
		color: #ffffff;
		font-size:24px;
		font-weight: blod;
	}
</style>